<script setup lang="ts">
import { ref, onMounted } from "vue";
import request from "@/utils/request";
interface Navinterface {
  [key: string]: string;
}
const navList = ref<Navinterface[]>([
  {
    icon: "i-carbon:home",
    title: "完结",
    path: "/pages/index/index",
  },
  {
    icon: "i-carbon:search",
    title: "分类",
    path: "/pages/classification/classification",
  },
  {
    icon: "i-carbon:favorite",
    title: "榜单",
    path: "/pages/bookstore/bookstore",
  },
]);

const info = ref([]);
const getRecommendAPI = async () => {
  const result = await request({
    url: "novel/recommend",
  });

  console.log(result, "result");
  info.value = result["biquge:hots:"];
};
const Recommend = ref([]);
const updatenew = ref([]);
const getTJdata = async () => {
  const result = await request({
    url: "novel/new",
  });
  console.log(result, "result");
  Recommend.value = result["biquge:new:"];
  updatenew.value = result["biquge:update:"];
};
const change = (e) => {
  console.log(e, "chnage");
  swiperDotIndex.value = e.detail.current;
};
const clickItem = (e) => {
  swiperDotIndex.value = e.detail.current;
};
const current = ref(0);
const swiperDotIndex = ref(0);
const handleClick = (item: Navinterface) => {
  uni.navigateTo({
    url: item.path,
  });
};
const search = () => {
  uni.navigateTo({
    url: "pages/Search/index",
  });
};
const handleDetail = ({ id }: { id: string }) => {
  uni.navigateTo({
    url: `/pages/booksDetail/booksDetail?id=${id}`,
  });
};
onMounted(() => {
  getRecommendAPI();
  getTJdata();
});
</script>

<template>
  <div class="index-wrapper">
    <div class="header-top flex justify-between">
      <div class="flex">
        <span>小说</span>
      </div>
      <i @click="search" class="i-ep-search"></i>
    </div>

    <div class="index-img">
      <uni-swiper-dot
        @clickItem="clickItem"
        :info="info"
        :current="current"
        field="content"
      >
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
          <swiper-item
            v-for="(item, index) in info"
            @click="handleDetail(item)"
            :key="index"
          >
            <img class="w-full h-full" :src="item.picture" alt="" />
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </div>

    <div class="nav-bookstore">
      <div
        v-for="(item, index) in navList"
        @click="handleClick(item)"
        :key="index"
      >
        <i :class="item.icon" class="book-item-icon"></i>
        <div class="mt-5rpx">{{ item.title }}</div>
      </div>
    </div>

    <div class="bookstore">
      <div class="bookstore-top">
        <div class="font-size-24rpx">
          <span class="color-#E89330"><i class="i-ep-document"></i></span
          >新书上架
        </div>
        <span class="color-#77828A font-size-24rpx"></span>
      </div>
      <div class="bookstore-content">
        <template v-for="item in Recommend" :key="item.id">
          <BooksItem :item="item"></BooksItem>
        </template>
      </div>
    </div>
    <div class="bookstore">
      <div class="bookstore-top">
        <div class="font-size-24rpx">
          <span class="color-#E89330"><i class="i-ep-document"></i></span
          >最近更新
        </div>
        <span class="color-#77828A font-size-24rpx"></span>
      </div>
      <div class="bookstore-content">
        <template v-for="item in updatenew" :key="item.id">
          <BooksItem :item="item"></BooksItem>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-wrapper {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32rpx;
}
.header-top {
  height: 30rpx;
  width: 100%;
}
.index-img {
  margin-top: 40rpx;
  width: 100%;
  height: 248rpx;
  border-radius: 20rpx;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.nav-bookstore {
  margin-top: 20rpx;
  height: 140rpx;
  background: #fceccc;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.bookstore {
  margin-top: 20rpx;
  height: auto;
  background: #fceccc;
  border-radius: 22rpx;
  padding: 20rpx 32rpx;
  .bookstore-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
  }
  .bookstore-content {
    height: auto;
    columns: 2 40rpx;
  }
}
.book-item {
  display: flex;
  height: 200rpx;
  margin-bottom: 30rpx;
}
.book-item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-start;
  margin-left: 20rpx;
  .book-item-title {
    height: 34rpx;
    width: 200rpx;
    font-size: 34rpx;
    line-height: 34rpx;
    overflow: hidden;
  }
  .book-item-desc {
    height: 78rpx;
    width: 200rpx;
    margin: 10rpx 0;
    line-height: 34rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #77828a;
  }
  .book-item-other {
    height: 32rpx;
    color: #a8a8a8;
    line-height: 32rpx;
    font-size: 28rpx;
  }
}
.book-item-img {
  height: 200rpx;
  width: 150rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 200rpx;
  font-size: 28rpx;
  color: #ccc;
}
.book-item-icon {
  font-size: 60rpx;
  color: #e89330;
}
</style>
